<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:th='http://www.thymeleaf.org'>
<body>
<span th:replace="@{banner}"></span>
<div class="container-fluid">

    <span th:replace="@{nav}"></span>

    <div class="wrapper">
        <div class="wrapper_header">
            <button id="addUser_trigger" class="btn" type="button">新增</button>
            <span class="pull-right">
                <span>
                    <input type="text" placeholder="请输入用户名或手机号"
                           style="height: 30px;width: 200px;line-height: 20px;padding: 5px;border: 1px solid #ddd"/><a
                        href="#" th:onclick="|searchUser(this)|">搜索</a>
                </span>
                &nbsp;
                <span>
                <span>所属部门:</span>
                <select id="department" name="department">
                    <option>请选择</option>
                    <option>全部</option>
                    <span th:if="not ${#lists.isEmpty(departments)}"
                          th:each="department,departmentStat : ${departments}">
                    <option th:text="${department.name}"></option>
                    </span>
                </select>
                </span>
            </span>
        </div>


        <table id="user_list" class="wrapper_inner table-bordered">
            <tr>
                <th>姓名</th>
                <th>手机号</th>
                <th>部门</th>
                <th>密码</th>
                <th>修改</th>
                <th>删除</th>
            </tr>
            <tr class="user_list_tr" th:if="not ${#lists.isEmpty(users)}" th:each="user,userStat : ${users}"
                th:if="${userStat.index}<15">
                <td class="hide" th:text="${user.id}"></td>
                <td th:text="${user.name}"></td>
                <td th:text="${user.phone}"></td>
                <td th:text="${user.department}"></td>
                <td th:text="${user.password}"></td>
                <td th:onclick="|updateUser(this)|">编辑</td>
                <td th:onclick="|delUser(this)|">删除</td>
            </tr>
        </table>
        <div class="pager pull-right"><a class="pre">上一页</a>&nbsp;&nbsp;<span class="cp"></span>/<span
                class="tp"></span> &nbsp;&nbsp;<a
                class="next">下一页</a></div>
    </div>
</div>


<div class="md-modal" id="addUser_modal">
    <span class="md-close" style="position: absolute;right: 10px;top: 10px;cursor: pointer">X</span>
    <div class="md-content">
        <form id="user_form">
            <input name="id" class="hide"/>
            <label>
                <span>姓名:</span>
                <input name="name" type="text"/>
            </label>
            <label>
                <span>手机号:</span>
                <input name="phone" type="text"/>
            </label>
            <label>
                <span>所属部门:</span>
                <select name="department" th:if="not ${#lists.isEmpty(departments)}">
                    <option th:each="department,departmentStat : ${departments}" th:text="${department.name}"></option>
                </select>
            </label>
            <label>
                <span>密码:</span>
                <input name="password" type="text"/>
            </label>
            <label id="alert" style="color:#fc6423;">
            </label>
            <div class="footer">
                <button class="btn btn-primary" type="button" onclick="addUser()">确定</button>
            </div>
        </form>
    </div>

</div>

<script type="text/javascript" th:src="@{/zs/assets/js/myModal.js}"></script>

<script th:inline="javascript">
    var users = /*[[${users}]]*/;
    var cPage = 1;

    $(function () {
        var tp = users.length % 15 > 0 ? Math.floor(users.length / 15) + 1 : users.length / 15;
        if (tp == 1) {
            $('.pager').hide();
        }
        else {
            $('.cp').html(cPage);
            $('.tp').html(tp);
        }

    });

    $('.pre').bind('click', function () {
        if (cPage == 1) return;
        --cPage;
        $('.user_list_tr').remove();
        var content;
        for (var i = (cPage - 1) * 15; i < cPage * 15; i++) {
            content += '<tr class="user_list_tr">' +
                '<td class="hide">' + users[i].id + '</td>' +
                '<td>' + users[i].name + '</td>' +
                '<td>' + users[i].phone + '</td>' +
                '<td>' + users[i].department + '</td>' +
                '<td>' + users[i].password + ' </td>' +
                '<td onclick = "updateUser(this)"> 编辑 </td>' +
                '<td onclick = "delUser(this)"> 删除 </td>' +
                '</tr>';
        }
        $('#user_list').append(content);
        $('.cp').html(cPage);
        console.log(cPage);
    });

    $('.next').bind('click', function () {
        if (cPage * 15 >= users.length) return;
        $('.user_list_tr').remove();
        var content;
        for (var i = cPage * 15; i < ((cPage + 1) * 15 > users.length ? users.length : (cPage + 1) * 15); i++) {
            content += '<tr class="user_list_tr">' +
                '<td class="hide">' + users[i].id + '</td>' +
                '<td>' + users[i].name + '</td>' +
                '<td>' + users[i].phone + '</td>' +
                '<td>' + users[i].department + '</td>' +
                '<td>' + users[i].password + ' </td>' +
                '<td onclick = "updateUser(this)"> 编辑 </td>' +
                '<td onclick = "delUser(this)"> 删除 </td>' +
                '</tr>';
        }
        $('#user_list').append(content);
        ++cPage;
        $('.cp').html(cPage);
        console.log(cPage);
    });

    var uname, uphone;

    $('.system-nav li:eq(0)').addClass('choosed');

    function searchUser(e) {
        var param = $(e).parent().children('input').val();
        if (isEmpty(param)) return;
        else {
            window.location.href = "/zs/user/search/" + param;
        }
    }

    $("#addUser_trigger").bind('click', function (e) {
        if ($("#addUser_modal").is(":visible")) {
            return;
        }
        else {
            $('#user_form').formReset();
            open_modal("addUser_modal");
        }
        e.preventDefault();
    });

    $("#department").change(function () {
        window.location.href = "/zs/user/" + $(this).val();
    });

    function addUser() {
        var user = $('#user_form').serializeObject();
        var url;
        if (isEmpty(user.id)) {
            if (isEmpty(user.name)) {
                alert("用户名不允许为空");
                return;
            }
            if (!(/^1[34578]\d{9}$/.test(user.phone))) {
                alert("手机号填写有误！");
                return;
            }
            for (var i = 0; i < users.length; i++) {
                if (users[i].name == user.name) {
                    alert("用户名已存在");
                    return;
                }
                if (users[i].phone == user.phone) {
                    alert("手机号已存在");
                    return;
                }
            }
            if (isEmpty(user.password)) {
                alert("密码不允许为空！");
                return;
            }
            url = "/zs/user/add";
        } else {
            if (isEmpty(user.name)) {
                alert("用户名不允许为空");
                return;
            }
            if (!(/^1[34578]\d{9}$/.test(user.phone))) {
                alert("手机号填写有误！");
                return;
            }
            for (var i = 0; i < users.length; i++) {
                if (users[i].name == user.name && user.name != uname) {
                    alert("用户名已存在");
                    return;
                }
                if (users[i].phone == user.phone && user.phone != uphone) {
                    alert("手机号已存在");
                    return;
                }
            }
            if (isEmpty(user.password)) {
                alert("密码不允许为空！");
                return;
            }
            url = "/zs/user/update";
        }
        $.post(url, user,
            function (data, status) {
                if (status == 'success') {
                    $('#user_form').formReset();
                    window.location.reload();
                } else {
                    alert("添加(修改)失败");
                }
            });
    }

    function delUser(el) {
        var id = $(el).parent().children().eq(0).text();
        var url = '/zs/user/del/' + id;
        if (confirm("确定删除？")) {
            $.post(url, function (data, status) {
                if (status == 'success') {
                    $(el).parent().hide();
                } else {
                    alert("删除失败");
                }
            });
        }
    }

    function updateUser(el) {
        var childrens = $(el).parent().children();
        $('#user_form').find('input[name=id]').val(childrens.eq(0).text());
        $('#user_form').find('input[name=name]').val(childrens.eq(1).text());
        $('#user_form').find('input[name=phone]').val(childrens.eq(2).text());
        $('#user_form').find('input[name=department]').val(childrens.eq(3).text());
        $('#user_form').find('input[name=password]').val(childrens.eq(4).text());
        uname = childrens.eq(1).text();
        uphone = childrens.eq(2).text();
        open_modal("addUser_modal");
    }

</script>

</body>
</html>